<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      layout:decorator="base/layout.html">

<!-- start: Content -->
<div layout:fragment="content" class="main sidebar-minified">
    <div class="row">
        <div class="col-lg-12">
            <ol class="breadcrumb">
                <li><i class="fa fa-home"></i><a href="index.html">首页</a></li>
                <li><i class="fa fa-table"></i>教师管理</li>
            </ol>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h2><i class="fa fa-table red"></i><span class="break"></span><strong>查询信息</strong></h2>
                    <div class="panel-actions">
                        <a href="table.html#" class="btn-setting"><i class="fa fa-rotate-right"></i></a>
                        <a href="table.html#" class="btn-minimize"><i class="fa fa-chevron-up"></i></a>
                        <a href="table.html#" class="btn-close"><i class="fa fa-times"></i></a>
                    </div>
                </div>
                <div class="panel-body">
                    <form id="modularForm" th:action="@{../teachers/teacher}" method="post"
                          enctype="multipart/form-data" class="form-horizontal ">
                        <div class="form-group">
                            <label class="col-lg-2 col-md-2 col-sm-12 control-label">姓名</label>
                            <div class="col-lg-10 col-md-10">
                                <div class="row">
                                    <div class="col-lg-2 col-md-2">
                                        <input type="text" id="userName" name="name" class="form-control"
                                               placeholder="姓名" th:value="${queryMap.get('name')}">
                                    </div>
                                    <label class="col-lg-2 col-md-2 col-sm-12 control-label">职业</label>
                                    <div class="col-lg-2 col-md-2">
                                        <select id="majorInfo" name="major" class="form-control" size="1">
                                        </select>
                                    </div>
                                    <button id="submitBtn" type="submit" class="btn btn-sm btn-success"><i
                                            class="fa fa-dot-circle-o"></i> 查询
                                    </button>
                                    <button type="button" class="btn btn-sm btn-danger" onclick="resetQuery()"><i
                                            class="fa fa-dot-circle-o"></i>重置
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-2 col-md-2 col-sm-12 control-label">电话</label>
                            <div class="col-lg-10 col-md-10">
                                <div class="row">
                                    <div class="col-lg-2 col-md-2">
                                        <input type="text" id="phoneNum" name="phoneNum" class="form-control"
                                               placeholder="电话" th:value="${queryMap.get('phoneNum')}">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div><!--/.col-->
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h2><i class="fa fa-table red"></i><span class="break"></span><strong>教师管理 </strong></h2>
                    <div class="panel-actions">
                        <a href="table.html#" class="btn-setting"><i class="fa fa-rotate-right"></i></a>
                        <a href="table.html#" class="btn-minimize"><i class="fa fa-chevron-up"></i></a>
                        <a href="table.html#" class="btn-close"><i class="fa fa-times"></i></a>
                    </div>
                </div>
                <div class="panel-body">
                    <table class="table table-striped table-bordered bootstrap-datatable datatable">
                        <thead>
                        <tr>
                            <th>序号</th>
                            <th>姓名</th>
                            <th>职业</th>
                            <th>电话</th>
                            <th>附件</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="teacher,userStat  : ${teacherList}">
                            <td th:text="${userStat.index+1}"></td>
                            <td th:text="${teacher.name}"></td>
                            <td th:text="${teacher.majorName}"></td>
                            <td th:text="${teacher.phoneNum}"></td>
                            <td>
                                <a th:href="@{downloadFile(fileName=${teacher.utilFilePath},fileNameSrc=${teacher.fileNameSrc})}"
                                   th:text="${teacher.fileNameSrc}"> </a>
                            </td>
                            <td>
                                <a class="btn btn-success" th:onclick="'layerOpen(\'toDetail?id='+${teacher.id}+'\')'">
                                    <i class="fa fa-search-plus "></i>
                                </a>
                                <a class="btn btn-info" th:href="@{../teachers/toUpdate(id=${teacher.id})}">
                                    <i class="fa fa-edit "></i>
                                </a>
                                <a class="btn btn-danger" th:onclick="'deleteTeacher('+${teacher.id}+')'">
                                    <i class="fa fa-trash-o "></i>

                                </a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <!-- 分页 -->
                    <div th:replace="base/pagination :: pagination('teacher')"></div>
                </div>
            </div>
        </div><!--/col-->
    </div><!--/row-->
    <script>
        //当页面初始化的时候，首次加载的函数
        $(document).ready(function () {
            //你想加载哪个函数，你就写在这个里面就可以
            initMajorInfo();
        });

        //加载职业的下拉框内容，用AJAX技术去实现的
        function initMajorInfo() {
            //获取页面查询条件
            let major = "[[${queryMap['major']}]]";

            //往select下拉框去追加内容
            $('#majorInfo').append("<option value=-1> 请选择 </option>");
            $.ajax({
                url: '../major/selectMajor',
                type: 'get',
                datatype: 'json',
                data: {},
                success: function (data) {
                    //访问成功以后，执行这里面的内容
                    for (let i in data) {
                        if (major === data[i].id) {
                            $('#majorInfo').append("<option value=" + data[i].id + " selected> " + data[i].name + " </option>")
                        } else {
                            $('#majorInfo').append("<option value=" + data[i].id + "> " + data[i].name + " </option>")
                        }
                    }
                }
            })
        }

        /**
         * 通过点击重置按钮，置空查询条件
         * 是因为reset按钮无法重置 通过查询后赋值到查询输入框的内容
         *
         */
        function resetQuery() {
            $("#userName").val("");
            $("#majorInfo").val("-1");
            $("#phoneNum").val("");
        }

        function deleteTeacher(id) {
            $.ajax({
                url: 'delete',
                type: 'get',
                data: 'id=' + id,
                success: function () {

                    layer.msg("删除成功!");
                    setTimeout(function () {
                        location.reload();
                    }, 1500);

                }
            })
        }
    </script>
</div>
<!-- end: Content -->